<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <title>Layui树形表格3.x演示</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="{% static '/lib/fonts/iconfont.css' %}">
    <style>
         .page-wrapper {
            margin: 0 5px;
            padding: 0 15px;
        }
    </style>
</head>
<body class="layui-hide">
<div class="page-wrapper">
    <blockquote class="layui-elem-quote" style="margin: 15px 0;">系统管理>后台设置>菜单管理</blockquote>

    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe668;</i>展开全部
        </button>
        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe66b;</i>折叠全部
        </button>
    </div>
    <div class="layui-btn-container" style="display: inline-block;">

        <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-warm">
            <i class="layui-icon">&#xe666;</i>刷新
        </button>
    </div>
    <div class="ok-body">
	<div class="layui-row">
		<div class="layui-col-md12">
			<table class="layui-hide" id="demoTreeTb" lay-filter="tableFilter"></table>
		</div>
	</div>
</div>
</div>


<!--增加-->

<script src="/static/lib/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/lib/layui/lay/tree_table/'
    }).use(['layer', 'util','okLayer','treeTable', 'okUtils'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var okLayer = layui.okLayer;
        var util = layui.util;
        let okUtils = layui.okUtils;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: '/config/menus_list1/',
            toolbar: '#toolbarTpl',
            height: 'full-140',
            tree: {
                iconIndex: 3,
                isPidData: true,
                idName: 'id',
                pidName: 'menu_pid',
                arrowType: 'arrow2',
            },
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {type: 'numbers'},
                    {type: 'checkbox'},
                    {field: 'menu_code', title: '菜单代码', minWidth: 100},
                    {field: 'tree_name', title: '菜单名称', minWidth: 165},
                    {field: 'href', title: '菜单指向', minWidth: 165},
                    {field: 'fontFamily', title: '图标类型', minWidth: 165},
                    {field: 'menu_pname', title: '上级菜单', minWidth: 165},
                    {field: 'menu_pid', title: '上级菜单ID', minWidth: 165, hide:true},
                    {field: 'menu_marital', title: '菜单类型',templet: "#maritalTpl", minWidth: 100},
                    {field: 'icon',class:'ok-icon', title: '图标', minWidth: 50},
                    {field: 'now_status',class:'ok-icon', title: '显/隐',templet: "#statusTpl", minWidth: 80},
                    {align: 'center', toolbar: '#tbBar', title: '操作', width: 165}
                ]
            ],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            let data=obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
					break;
                case "del":
                    del(data);
                    break;
            }
        });

        // 头部工具栏点击事件
        treeTable.on('toolbar(demoTreeTb)', function (obj) {
            switch (obj.event) {
                case 'add':
                    add();
                    break;
                case 'LAYTABLE_TIPS':
                    layer.msg('提示');
                    break;
            }
        });
        // 添加事件
        function add() {
			okLayer.open("添加菜单", "{% url 'config:menus_insert_view' %}", "90%", "90%", null, function () {
			    insTb.reload();
			})
		}
        // 修改事件
        function edit(data) {
			okLayer.open("修改菜单", "{% url 'config:menus_edit_view' %}", "90%", "90%", function (layero,index) {
			    let iframe = window['layui-layer-iframe' + index];
                iframe.child(data);
			})
		}
		function del(data) {
            okLayer.confirm("确定要删除吗？此处为级联删除！",function () {
                okUtils.ajax("/config/menus_del/"+data.id,"post",data.field, true).done(function (response) {
                    okUtils.tableSuccessMsg(response.msg);
                     insTb.reload();
                }).fail(function (error) {
                    // 这里已经有提示了
                    console.log(error);
                });
            });
        }
        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });


        // 设置选中
        $('#btnChecked').click(function () {
            insTb.expand(4);
            insTb.setChecked([4]);
        });

        // 搜索
        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });

        // 清除搜索
        $('#btnClearSearch').click(function () {
            insTb.clearFilter();
        });

        // 重载
        $('#btnReload').click(function () {
            insTb.reload();
        });
        $('#btnRefresh').click(function () {
            insTb.refresh();
        });

        // 获取选中
        $('#btnGetChecked').click(function () {
            layer.alert('<pre>' + JSON.stringify(insTb.checkStatus().map(function (d) {
                return {
                    authorityName: d.authorityName,
                    authorityId: d.authorityId,
                    LAY_INDETERMINATE: d.LAY_INDETERMINATE
                };
            }), null, 3) + '</pre>');
        });

    });
</script>
<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    {% for l in data1 %}
        {% if l.menu_code == '50500202' %}
            <a href="javascript:" title="编辑" lay-event="edit"><button class="layui-btn layui-btn-xs">修改</button></a>
        {% elif l.menu_code == '50500203' %}
            <a href="javascript:" title="删除" lay-event="del"><button class="layui-btn layui-btn-danger layui-btn-xs">删除</button></a>
        {% endif %}
    {% endfor %}
</script>
<!--增加-->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
        {% for i in data1 %}
        {% if i.menu_code == '50500201' %}
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe608;</i>添加菜单</button>
        {% endif %}
        {% endfor %}
	</div>
</script>
<!--状态-->
<script type="text/html" id="statusTpl">
    {% verbatim %}
	{{#  if(d.now_status == 0){ }}
	<span class="layui-btn layui-btn-xs">显示</span>
	{{#  } else if(d.now_status == 1) { }}
	<span class="layui-btn layui-btn-danger layui-btn-xs">隐藏</span>
	{{#  } }}
	{% endverbatim %}
</script>
<!--菜单类型-->
<script type="text/html" id="maritalTpl">
    {% verbatim %}
	{{#  if(d.menu_marital == '01'){ }}
	<span class="layui-btn-primary layui-btn-xs">目录</span>
	{{#  } else if(d.menu_marital == '02') { }}
	<span class="layui-btn layui-btn-danger layui-btn-xs">菜单</span>
    {{#  } else if(d.menu_marital == '03') { }}
	<span class="layui-btn layui-btn-warm layui-btn-xs">按钮</span>
	{{#  } }}
	{% endverbatim %}
</script>
</body>
</html>